<template>
<div class="container">
    <p>{{ obj.name }}</p>
    <p>{{ obj.age }}</p>
    <p>解构之后的==={{ name }}</p>
    <p>解构之后的==={{age }}</p>
    <button @click="UpdateName">修改数据</button>
    <p>{{ chilndren.name }}</p>
</div>

<!--this在组合api中 是不存在-->
<h2>{{ message }}</h2>
<h4>{{ msg }}</h4>
<button @click="changeMsg">改变msg的值</button>
<h5>{{ count }}</h5>
    <button @click="changeCount">改变count值</button>
</template>
<script>
import { onBeforeMount, onMounted, reactive, ref, toRefs } from "vue"
export default {
    // data() { 
    //     return {
    //         message:'Hello 组合Api'    
    //     }
    // }
    // ,
    // beforeCreate() {
    //     console.log("执行-----");
    // },
    // created() {
    //     console.log("created执行了-----");
    // },
    setup() { 
        console.log("setup执行了。。。。。");
        console.log(this);

        const msg=ref("hello Vue")
        //构建函数
      function changeMsg(){ 
          msg.value = "你好 Vue"
          console.log("msg的数据是：",msg.value);
        }

        let count = ref(0)
        let changeCount = () => { 
            count.value++
        }
        //生命周期
        onBeforeMount(() => { 
            console.log("DOM渲染前",document.querySelector(".container"));
        })
        onMounted(() => { 
             console.log("DOM渲染后", document.querySelector(".container"));
        })
         onMounted(() => {
            console.log("DOM渲染后2", document.querySelector(".container"));
        })
        //reactive 定义复杂的类型 目的是为响应页面
        const obj = reactive({
            name: '唐昊',
            age: 18,
            chilndren: {
                name:'唐三'
            }
        })

        const UpdateName = () => { 
            console.log("我要修改数据了");
            obj.name = "萧炎"
            obj.age=19
        }
        //解构 torefs 把最外层的解构名字去掉
        return {
            msg, count, changeMsg, changeCount,
            obj, UpdateName,...toRefs(obj)
        }
    }
}


</script>